// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import './assets/reset.css'
import './assets/base.styl'
import { Loadmore, Spinner, InfiniteScroll, Popup, Picker, Actionsheet, Indicator, Toast, Range } from 'mint-ui';
import 'mint-ui/lib/style.css'
import VueLazyLoad from 'vue-lazyload'
import api from './api'
import util from './util'

Vue.component(Loadmore.name, Loadmore);
Vue.component(Spinner.name, Spinner);
Vue.component(Popup.name, Popup);
Vue.component(Picker.name, Picker);
Vue.component(Range.name, Range);
Vue.component(Actionsheet.name, Actionsheet);
Vue.config.productionTip = false
Vue.$store = Vue.prototype.$store = store
Vue.$ajax = Vue.prototype.$ajax = api
Vue.use(util)

const errorPng = require('./assets/logo.png')
Vue.use(VueLazyLoad, {
    error: errorPng,
    loading: errorPng,
    attempt: 1
})
router.beforeEach((to, from, next) => {
    Indicator.close()
    document.title = to.meta.title || 'selfVueFrame'
    next()
})
// 此方法的作用是如果用浏览器打开就将页面样式做成仿移动端的样式
function set_screen(wrap) {
    let ua = navigator.userAgent
    if (!ua.includes('Mobile')) {
        //表示不是移动端 此时将body的样式重新定义下
        let frame = document.querySelector(wrap)
        let body = document.querySelector('body')
        let html = document.querySelector('html')
        html.style.fontSize = 75 + 'px'
        body.style.backgroundColor = '#c9c9c9'
        frame.style.maxWidth = 750 + 'px'
        frame.style.height = 100 + 'vh'
        frame.style.margin = '0 auto'
        frame.style.backgroundColor = '#ffffff'
    }
}
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>',
    mounted() {
        set_screen("#app");
    }
})
